<template>
  <view class="page content">
    <u-navbar
      :fixed="true"
      :placeholder="true"
      leftText="购物车"
      bgColor="#ffffff"
      :autoBack="false"
      titleStyle="{color: #000000}"
      leftIconColor="#000000">
      <view
        slot="right"
        class="u-nav-slot"
        :style="{
          'margin-right': navbar_right_button_margin_right + 'px',
          color: show_cart_manager ? '#F49C0D' : '#F49C0D',
        }"
        @click="show_cart_manager = !show_cart_manager">
        编辑
      </view>
    </u-navbar>

    <view class="page-ctx">
      <scroll-view
        scroll-y
        class="products-scroll-y"
        style="width: 100%; height: calc(100vh-80px)">
        <view class="product-wrap">
          <view class="product-list" v-if="cart_products.length">
            <view
              class="product-item flex-between"
              v-for="(item, index) in cart_products"
              :key="index">
              <view
                class="select-box flex-center"
                @click="doProductToggleSelect(item, index)">
                <view class="icon-box">
                  <image
                    v-if="item.is_selected"
                    src="@/static/image/radio1.png"
                    mode=""></image>
                </view>
              </view>
              <view class="poster-box">
                <image :src="item.image" mode="aspectFill"></image>
              </view>
              <view class="info-box">
                <view class="title-box">
                  <view class="title">
                    {{ item.title }}
                  </view>
                </view>
                <!-- <view class="remark">
									{{item.remark  || ''}}
								</view> -->
                <view class="guige">
                  {{ item.keyVals }}
                </view>
                <view class="price-box flex-between">
                  <view class="price-info">{{ item.priceSale }}积分</view>
                  <view class="act-box">
                    <u-number-box
                      v-model="item.num"
                      :asyncChange="true"
                      :step="1"
                      :min="0"
                      :max="item.kucun"
                      @change="(e) => valChange(e, item)"
                      bgColor="#E8EDF5"
                      color="#9695A3"
                      inputWidth="25"
                      buttonSize="25"
                      iconStyle="color: #9695A3"></u-number-box>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="empty-wrap" v-else>
            <w_empty emptyText="您的购物车是空的~"></w_empty>
          </view>

          <!-- 猜你喜欢 -->
          <!-- <view class="cai-xihuan" >
						<view class="xihuan-tag">
							<image src="/static/goods/xihuan.png"></image>
						</view>
						<view class="like-goods-list">
							<productList :list="Likeproducts"></productList>
						</view>
					</view> -->
        </view>
      </scroll-view>
    </view>

    <view class="page-foot" v-if="!show_cart_manager">
      <view class="safe-fixed-bottom" :class="{ is_h5: is_env_h5 }">
        <view class="jiesuan-box flex-between">
          <view class="select-all-box flex" @click="doCartToggleSelectAll()">
            <view class="icon-box">
              <image
                v-if="cart_is_selected_all"
                src="@/static/image/radio1.png"
                mode=""></image>
            </view>
            <view class="select-text">全选</view>
          </view>
          <view class="price-box flex">
            <view class="label">合计应付：</view>
            <view class="price-info">{{ cart_selected_price }}积分</view>
          </view>
          <view class="btns flex-center">
            <view class="btn flex-center btn-buy" @click="toPayment()">
              结算
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="page-foot"
      :class="{ is_h5: is_env_h5 }"
      v-if="show_cart_manager">
      <view class="safe-fixed-bottom" :class="{ is_h5: is_env_h5 }">
        <view class="manager-box flex-between">
          <view class="select-all-box flex" @click="doCartToggleSelectAll()">
            <view class="icon-box">
              <image
                v-if="cart_is_selected_all"
                src="@/static/image/radio1.png"
                mode=""></image>
            </view>
            <view class="select-text">全选</view>
          </view>
          <view class="btns flex-center">
            <view class="btn flex-center btn-buy" @click="doCartDeleteSelect()">
              删除
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 删除提示 -->
    <cart_delete_product_pop
      ref="cart_delete_product_pop"
      @confirm="doConfirmDeleteSelect" />
  </view>
</template>

<script>
import cart_delete_product_pop from "@/components/cart/cart_delete_product_pop.vue";
import productList from "@/components/product/productList.vue";

export default {
  components: {
    cart_delete_product_pop,
    productList,
  },
  data() {
    return {
      navbar_right_button_margin_right: 0, //顶部导航栏右侧【管理按钮】右边距
      show_cart_manager: false, //是否展示购物车管理
      // #ifdef H5
      is_env_h5: true, //
      // #endif
      // #ifndef H5
      is_env_h5: false, //
      // #endif

      //
      cart_is_selected_all: false,
      cart_products: [], //产品列表
      cart_total_num: 0, //购物车总数量
      cart_total_price: 0, //购物车总金额
      pagination: {
        page: 1,
        pageNum: 10,
      },
      loadmore_status: "loadmore", //loadmore  / loading / nomore
      Likeproducts: [],
      //

      delele_type: "",
      delete_product_item: {},
    };
  },

  computed: {
    //商品
    cart_products_selected() {
      return this.cart_products.filter((v) => v.is_selected);
    },
    has_cart_products_selected() {
      return this.cart_products_selected.length > 0;
    },
    cart_selected_price() {
      let total = 0;
      if (this.cart_products_selected.length) {
        this.cart_products_selected.forEach((v) => {
          total += v.priceSale * v.num;
        });
      }
      total = parseFloat(total).toFixed(2);
      return total;
    },
  },

  onLoad() {
    // #ifdef MP
    this.getMenuRect();
    // #endif
  },

  onReachBottom() {
    this.loadMore();
  },

  onShow() {
    this.initQuery();
    this.query_cart();
    // this.query_like_goods()
  },

  methods: {
    initQuery() {
      this.Likeproducts = [];
      this.pagination.page = 1;
      this.loadmore_status = "loadmore";
    },

    loadMore() {
      console.log(this.loadmore_status, "1200");
      if (this.loadmore_status == "loadmore") {
        this.loadmore_status = "loading";
        this.pagination.page++;
        this.query_product();
      }
    },
    getMenuRect() {
      let system_info = uni.getSystemInfoSync();
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navbar_right_button_margin_right =
        system_info.windowWidth - menuButtonInfo.left;
      this.$log("获取系统信息", system_info);
      this.$log("胶囊按钮位置信息 menuButtonInfo", menuButtonInfo);
    },

    query_cart() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "gouwuche_lists",
        },
      }).then((res) => {
        if (res.code == 200) {
          let cart_total_num = 0;
          let cart_total_price = 0;
          this.cart_is_selected_all = false;
          let list = res.data;
          list.forEach((v) => {
            v.num = parseInt(v.num);
            v.is_selected = false;
            v.keyVals = v.keyVals == "无" ? "默认" : v.keyVals;
            cart_total_num += parseInt(v.num);
            cart_total_price += parseInt(v.num) * parseFloat(v.priceSale);
          });
          this.cart_total_num = cart_total_num;
          this.cart_total_price = parseFloat(cart_total_price).toFixed(2);
          this.cart_products = list;

          this.$store.commit("set_vuex_cart_number", cart_total_num);
        }
      });
    },

    // 切换产品勾选
    doProductToggleSelect(item, index) {
      item.is_selected = !item.is_selected;
      this.cart_products.splice(index, 1, item);

      //
      if (this.cart_products.some((v) => !v.is_selected)) {
        this.cart_is_selected_all = false;
      } else {
        this.cart_is_selected_all = true;
      }
    },

    // 购物车切换股癣
    doCartToggleSelectAll() {
      this.cart_is_selected_all = !this.cart_is_selected_all;

      this.cart_products.forEach((v) => {
        v.is_selected = this.cart_is_selected_all;
      });
    },

    doCartDeleteSelect() {
      this.delele_type = "manager";

      if (!this.has_cart_products_selected) {
        this.$alert("请先勾选要删除的购物车产品");
        return;
      }
      this.$refs.cart_delete_product_pop.init();
    },

    doConfirmDeleteSelect() {
      let guige_ids = "";
      if (this.delele_type == "single") {
        //删除单个
        guige_ids = this.delete_product_item.inventoryId;
      } else {
        //删除所有勾选
        guige_ids = this.cart_products_selected
          .map((v) => v.inventoryId)
          .join(",");
      }

      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "gouwuche_del",
          inventoryId: guige_ids, //产品规格id(多个用,分开)
        },
      }).then((res) => {
        if (res.code == 200) {
          if (this.delele_type == "single") {
            this.cart_products = this.cart_products.filter(
              (v) => v.inventoryId != this.delete_product_item.inventoryId
            );
          } else {
            this.cart_products = this.cart_products.filter(
              (v) => !v.is_selected
            );
          }

          this.$store.commit("set_vuex_cart_number", res.data.count);
          this.show_cart_manager = false;
        }
      });
    },

    valChange(e, item) {
      this.$log("item", item);
      console.log("e", e);
      console.log("e 当前值为: " + e.value);

      let num = e.value;

      if (num >= item.kucun) {
        return;
      }
      if (num == 0) {
        this.$refs.cart_delete_product_pop.init();
        this.delete_product_item = item;
        this.delele_type = "single";
        return;
      }
      item.num = num;

      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "gouwuche_updateNum",
          inventoryId: item.inventoryId, //产品规格id(多个用,分开)
          num: num,
        },
      }).then((res) => {
        if (res.code == 200) {
          // this.cart_products = this.cart_products.filter(v => !v.is_selected);
          this.$store.commit("set_vuex_cart_number", res.data.count);

          let index = this.cart_products.find(
            (v) => v.inventoryId == item.inventoryId
          );
          this.cart_products.splice(index, 1, item);
        }
      });
    },

    toPayment() {
      if (
        this.cart_products_selected &&
        this.cart_products_selected.length == 0
      ) {
        this.$alert("请加购商品");
        return;
      }

      let items_format = this.cart_products_selected.map((v) => ({
        title: v.title,
        image: v.image,
        inventoryId: v.inventoryId,
        productId: v.productId,
        keyVals: v.keyVals,
        num: v.num,
        priceSale: v.priceSale,
        priceMarket: v.priceMarket,
      }));

      this.$store.commit(
        "set_cache_payment_products",
        JSON.stringify(items_format)
      );

      // return
      this.toRoute({
        path: "/order-submit",
        query: {
          from: "cart",
        },
      });
    },

    query_like_goods() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          car_tui: 1, //产品规格id(多个用,分开)
          ...this.pagination,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.Likeproducts = this.Likeproducts.concat(res.data);
          this.loadmore_status =
            res.data.count > this.Likeproducts.length ? "loadmore" : "nomore";
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
::v-deep .u-number-box__minus {
  width: 25px;
}

::v-deep .u-number-box__plus {
  width: 25px;
}

.page {
}

.page-ctx {
}

.products-scroll-y {
}

.product-wrap {
  padding: 24rpx 32rpx 180rpx;
  .product-list {
    .product-item {
      margin-bottom: 24rpx;
      padding: 40rpx 0;
      background: #ffffff;
      // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
      border-radius: 16rpx 16rpx 16rpx 16rpx;

      .select-box {
        align-self: stretch;
        width: 88rpx;

        .icon-box {
          width: 40rpx;
          height: 40rpx;
          border: 2rpx solid #e1e3e8;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .poster-box {
        width: 176rpx;
        height: 176rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .info-box {
        flex: 1;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .title-box {
          min-height: 50rpx;

          .title {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }

        .remark {
          margin-top: 4rpx;
          height: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #838b9e;
        }

        .guige {
          margin-top: 4rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
        }
      }
    }
  }
}
.price-box {
  margin-top: 18rpx;

  .price-info {
    font-weight: bold;
    font-size: 28rpx;
    color: #e23410;
  }

  .act-box {
  }
}
.page-foot {
  .safe-fixed-bottom {
    &.is_h5 {
      position: fixed;
      bottom: 102rpx;
    }
  }
}

// 底部操作
.page-foot {
  .jiesuan-box {
    width: 100%;

    .select-all-box {
      flex: 1;
      height: 80rpx;
      overflow: hidden;

      .icon-box {
        width: 40rpx;
        height: 40rpx;
        border: 2rpx solid #e1e3e8;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .select-text {
        margin-left: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }
    }

    .price-box {
      justify-content: flex-end;
      padding-right: 26rpx;

      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #222222;
      }

      .price {
        .huobi {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #e23410;
        }

        .value {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #e23410;
        }
      }
    }

    .btns {
      .btn {
        width: 192rpx;
        height: 80rpx;
        background: #f49c0d;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }
    }
  }
}

// 底部操作
.page-foot {
  .manager-box {
    width: 100%;

    .select-all-box {
      height: 80rpx;
      flex: 1;
      // overflow: hidden;

      .icon-box {
        width: 40rpx;
        height: 40rpx;
        border: 2rpx solid #e1e3e8;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .select-text {
        margin-left: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }
    }

    .btns {
      .btn {
        width: 224rpx;
        height: 80rpx;
        background: #f49c0d;
        border-radius: 60rpx 60rpx 60rpx 60rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }
    }
  }
}

.cai-xihuan {
  margin-top: 34rpx;

  .xihuan-tag {
    display: flex;
    justify-content: center;
  }

  image {
    width: 448rpx;
    height: 40rpx;
  }

  .like-goods-list {
    margin-top: 26rpx;
  }
}
</style>
